<template>
    <el-form :inline="true" v-model="attrDataInfo.formData" ref="editorFormRef" size="small" label-width="44px">
        <attr-area></attr-area>
            <el-form-item>
                <el-select v-model="attrDataInfo.formData.province" placeholder="请选择省份" style="width:245px" @change="changeCity">
                    <el-option v-for="item in provinceArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="attrDataInfo.formData.city" placeholder="请选择城市" style="width:245px" @change="changeStyle">
                    <el-option v-for="item in cityArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="attrDataInfo.formData.weatherStyle" placeholder="请选择风格" style="width:245px" @change="changeWeatherStyle">
                    <el-option v-for="(item, index) in weatherStyles" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="切换时间(s)" label-width="80px">
                <el-input v-model="attrDataInfo.formData.switchTime" onkeyup="value=value.replace(/[^\d]/g,'')" autocomplete="off" show-word-limit clearable style="width:165px;"></el-input>
            </el-form-item>
            <el-form-item>
                <bs-add-button-icon :show-icon="false" @click.native="addWeaterToTable"></bs-add-button-icon>
                <bs-delete-button-icon btn-type="" :show-icon="false" @click.native="removeWeatherFromTable"></bs-delete-button-icon>
            </el-form-item>
            <el-row>
                <el-col :span="24">
                    <el-table :data="attrDataInfo.formData.weatherAttr" border ref="tableDataRef" size="small" style="width: 245px;" height="122px" highlight-current-row @row-click="getCurrentRow">
                        <el-table-column :resizable="false" :prop="colData[0].prop" :label="colData[0].title" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column :resizable="false" :prop="colData[1].prop" :label="colData[1].title" align="center" show-overflow-tooltip width="55px"></el-table-column>
                        <el-table-column :resizable="false" :prop="colData[2].prop" :label="colData[2].title" align="center" show-overflow-tooltip width="55px"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
    </el-form>
</template>

<script>
import { weatherStyleArray } from "@/const/index";
import AttrArea from './AttrArea'
import { requestOpts } from '@/utils/request.js'

export default {
    data() {
        return {
            weatherAttr: [],
            colData: [
                { title: 'URL', prop:"url", istrue: true, visible: false },
                { title: '省份', prop:"provinceName", istrue: true, visible: false },
                { title: '城市', prop: 'cityName', istrue: true, visible: false}
            ],
            weatherStyles: weatherStyleArray,
            provinceArray: [],
            cityArray: [],
            httpInfo: '',
            rowIndex: 1,
            currentRow: {},
            provinceName: '',
            cityName: ''
        }
    },
    inject: ['attrDataInfo'],
    components: {
        AttrArea
    },
    created() {
        this.$nextTick(function() {
            this.loadProvince()
            setTimeout(() => {
                this.loadCity(this.attrDataInfo.formData.province)
            }, 100);
            
        })
    },
    methods: {
        // 加载省份
        loadProvince() {
            this.$store.dispatch('common/doLoadProvince', {}).then((res) => {
                this.provinceArray = res
            })
        },
        // 选择省份事件
        changeCity(pid) {
            this.$set(this.attrDataInfo.formData, 'city', '')
            this.loadCity(pid)
            this.provinceName = pid ? this.provinceArray.find(ele => ele.id === pid).name : ''
        },
        // 加载城市
        loadCity(pid) {
            this.cityArray = []
            const params = {provinceId: 11}
            if(pid) {
                params.provinceId = pid
            }
            this.$store.dispatch('common/doLoadCity', params).then((res) => {
                this.cityArray = res
            })
        },
        // 选择城市事件
        changeStyle() {
            const pid = this.attrDataInfo.formData.province
            const cid = this.attrDataInfo.formData.city
            this.provinceName = pid ? this.provinceArray.find(ele => ele.id === pid).name : ''
            this.cityName = cid ? this.cityArray.find(ele => ele.id === cid).name : ''
            this.changeWeatherStyle(this.attrDataInfo.formData.weatherStyle)
        },
        // 切换风格
        changeWeatherStyle(val) {
            const province = this.attrDataInfo.formData.province
            const city = this.attrDataInfo.formData.city
            this.httpInfo = ((requestOpts.noseUrl).endsWith('/') ? requestOpts.noseUrl : requestOpts.noseUrl  + '/') + 'v1/weather?cityId=' + city + '&corpCode=' + requestOpts.corpCode + '&provinceId='+ province +'&style=' + val
            this.$eventBus.$emit('changeAttr', 'weather', this.httpInfo)
        },
        // 添加到表格
        addWeaterToTable() {
            let _tableData = this.attrDataInfo.formData.weatherAttr.slice()
            if(!this.attrDataInfo.formData.city) {
                this.$message.error('请选择城市')
                return
            }
            if(!this.attrDataInfo.formData.switchTime) {
                this.$message.error('切换时间不能为空')
                return
            }
            if(this.attrDataInfo.formData.switchTime < 0 || this.attrDataInfo.formData.switchTime > 1000) {
                this.$message.error('切换时间输入范围[0-1000]')
                return
            }
            if(_tableData.length >= 100) {
                this.$message.error('最多只能添加100条')
                return
            }
            if(!this.httpInfo) {
                this.changeWeatherStyle(this.attrDataInfo.formData.weatherStyle)
            }
            if(!this.provinceName) {
                this.provinceName = this.provinceArray.find(ele => ele.id === this.attrDataInfo.formData.province).name
            }
            if(!this.cityName) {
                this.cityName = this.cityArray.find(ele => ele.id === this.attrDataInfo.formData.city).name
            }

            _tableData.push({
                index: this.rowIndex,
                province: this.attrDataInfo.formData.province,
                city: this.attrDataInfo.formData.city,
                provinceName: this.provinceName,
                cityName: this.cityName,
                switchTime: this.attrDataInfo.formData.switchTime,
                url: this.httpInfo,
                style: this.attrDataInfo.formData.weatherStyle
            })
            this.rowIndex = this.rowIndex + 1
            this.$eventBus.$emit('changeAttr', 'weatherAttr', _tableData)
        },
        // 获取当前行
        getCurrentRow(row, column, event) {
            let _tableData = this.attrDataInfo.formData.weatherAttr.slice()
            this.currentRow = row
            let idx = 0
            try {
                _tableData.forEach(item => {
                    if(item.index === row.index) {
                        throw Error()
                    }
                    idx = idx + 1
                })
            } catch (e) {}
            this.currentIndex = idx
            this.$eventBus.$emit('changeAttr', 'weather', row.url)
        },
        // 删除表格数据
        removeWeatherFromTable() {
            let _tableData = this.attrDataInfo.formData.weatherAttr.slice()
            if(this.currentRow) {
                _tableData.splice(this.currentIndex, 1)
                this.currentRow = null
                this.$eventBus.$emit('changeAttr', 'weatherAttr', _tableData)
            }
        }
    }
}
</script>